import { Card, Col, Row, Statistic } from "antd"

export default (props) => {
  const { topo, routerToFIB } = props;
  return (
    <Card size='small' style={{height: '100%'}} bordered={false}>
      <Row>
        <Col span={6}>
          <Statistic title="#Network Devices" value={topo.nodes.filter(n => n.type == 'router').length} />
        </Col>
        <Col span={6}>
          <Statistic title="#Terminal Devices" value={topo.nodes.filter(n => n.type == 'host').length} />
        </Col>
        <Col span={6}>
          <Statistic title="#Links" value={topo.edges.length} />
        </Col>
        <Col span={6}>
          <Statistic title="#Fowarding Rules" value={Object.values(routerToFIB).flatMap(fib => Object.keys(fib)).length} />
        </Col>
      </Row>

    </Card>
  )
}